<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一次作业-注册</title>
</head>

<h1 align="center">北邮风流</h1>
<style type="text/css">
	body{ 
		background:url(background.jpg) no-repeat; 
		background-size:cover; 
		font-weight:bolder;
		color:white;
		font: 24px/1.5 Tahoma,Helvetica,Arial,'华文中宋','宋体',sans-serif;}
	h1{color:white;
		font: 44px/1.5 Tahoma,Helvetica,Arial,'华文中宋','宋体',sans-serif;}
	p1,p2,p3,p4,p5,a
	{color:white;
	font: 24px/1.5 Tahoma,Helvetica,Arial,'华文中宋','宋体',sans-serif;}
</style>
<body>
	<form id="registerform" action="login.html" method="post">
	<fieldset><legend><p1>用户注册</p1></legend>
	<p2>用户名  :<input type="text" name="name" id="name" size="20"/>
	&nbsp;&nbsp;<span id="s1">用户名为大于两位的纯数字</span>
    <br>Username must consist of no less than 3 digits.</p2><br>
	<p3>注册密码:<input type="password" name="password" id="pa1" size="20"/>
	&nbsp;&nbsp;<span id="s2">密码以字母开头、可带数字、“_”、“.” 长度5-20位</span>
    <br>Please use 5-20 alphanumeric characters, underscores and dashes. </p3><br>
	<p4>确认密码:</p4><input type="password" name="repassword" id="pa2" size="20"/>
	&nbsp;&nbsp;<span id="s3"></span><br><br>
	<p5>电子邮箱:</p5><input type="email" name="e-mail" id="email" size="30"/><br><br>
    <!-- html5的新表单元素特性，自动检查是否符合email地址-->
	<input type="submit" name="submit" id="register" value="注册" onClick="checkandsave()">
	<input type="reset" name="Reset" value="清除输入"/>
	</fieldset></form>
    <a href="login.html">已有账号？点击这里登录<br><br></a>
    <img src="buptlogo.png" alt="Beijing University of Posts and Telecommunication" align="right" width="400" height="120">
</body>
<script type="text/javascript">
var registerform=document.getElementById("registerform");
var s1=document.getElementById("s1");
var s2=document.getElementById("s2");
var s3=document.getElementById("s3");
var s4=document.getElementById("s4");
var flag=true;	//判断注册信息是否有效
registerform.addEventListener("submit",function(event){
	var name=document.getElementById("name").value,
		email=document.getElementById("email").value,
	tomatch=/^\d{2,20}$/;
	if(!tomatch.test(name)){
		flag=false;
		event.preventDefault();
		s1.innerHTML="用户名只能包含数且大于2位!";
		s1.style.cssText="color:white";
	}
	if (repeat(name)){
		flag=false;
		event.preventDefault();
		s1.innerHTML="用户名或邮箱重复啦~换一个吧";
		s1.style.cssText="color:white";}},false);
		
registerform.addEventListener("submit",function(event){
	var pa1=document.getElementById("pa1").value,
	tmatch=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
	if(!tmatch.test(pa1)){
		flag=false;
		event.preventDefault();
		s2.innerHTML="密码应只能输入5-20个以字母开头、可带数字、“_”、“.”的字串!";
		s2.style.cssText="color:White";}},false);
		
registerform.addEventListener("submit",function(event){
var m1=document.getElementById("pa1").value,
    m2=document.getElementById("pa2").value;
	if(m1!=m2){
	event.preventDefault();
	flag=false;
	s3.innerHTML="两次密码必须保持一致!";
	s3.style.cssText="color:White";}},false);
	

	function checkandsave(){
		if (flag){			//将信息保存到本地数据库
		var data=new Object();
		data.username=document.getElementById("name").value;
		data.password=document.getElementById("pa1").value;
		data.mail=document.getElementById("email").value;
		data.str= JSON.stringify(data); 
		localStorage.setItem("userID"+document.getElementById("name").value,data.str);
		}
	}
	
	function repeat(name){		//检查是否与现有用户名重复
	for(var i=0;i<localStorage.length;i++){  //调用key方法获取localStorage中数据对应的键名  
      //localStorage.key(0)对应data1  
      var getKey=localStorage.key(i);  
	  //if(getKey.substring(0,6)==="userID"){ 
      //通过键名获取值，用户名称进行匹配
	  	var str=localStorage.getItem(getKey);  
	  	var data=JSON.parse(str);
		if (name===data.username)
			{return true;}
	  //}
	}
	return false;}
		</script>
</html>
